<template>
	<view class="page-fill">
		
		<view class="page-block info-list">
			<!-- 头像 -->
			
			<view class="item-wapper face-line-upbottom" @click="operator">
				<view class="info-words">头像</view>
				
				<view class="right-wapper">
					<image src="/static/user/avatar.png" class="face"></image>
				</view>
			</view>
			
			<view class="line-top">
				<view class="line"></view>
			</view>
			
			<!-- 昵称 -->
			<view class="item-wapper" @click="modifyNickname">
				<view class="info-words">昵称</view>
				
				<view class="right-wapper">
					<view class="gray-fields">
						{{userInfo.nickName}}
					</view>
					<view class="arrow-block" v-if="false">
						<image src="/static/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
			<view class="line-top">
				<view class="line"></view>
			</view>
			
			<!-- 生日 -->
			<view v-if="false" class="item-wapper" @click="modifyBirthday">
				<view class="info-words">生日</view>
				
				<view class="right-wapper">
					<view class="gray-fields">
						{{globalUser.birthday}}
					</view>
					<view class="arrow-block" v-if="false">
						<image src="/static/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
			<view class="line-top">
				<view class="line"></view>
			</view>
			
			<!-- 性别 -->
			<view v-if="false" class="item-wapper" @click="modifySex">
				<view class="info-words">性别</view>
				
				<view class="right-wapper">
					<view class="gray-fields">
						
						<view v-if="globalUser.sex == 1">
							男
						</view>
						<view v-else-if="globalUser.sex == 0">
							女
						</view>
						<view v-else>
							未选择
						</view>
						
					</view>
					<view class="arrow-block" v-if="false">
						<image src="/static/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="footer-wapper">
			<view v-if="false" class="footer-words" @click="cleanStorage">
				清理缓存
			</view>
			<view class="footer-words" style="margin-top: 10upx;" @click="toLogout">
				退出登录
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		putUserInfoPic
	} from '@/services/user.service.js'
	import {
	    mapState 
	} from 'vuex'; 
	 import {
	 	mapMutations
	 } from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			var me = this;
			me.requestLogo();
		},
		onShow() {
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			...mapMutations(['logout']),
			async requestLogo (){
				
				const {data} = await putUserInfoPic({});
				
				
			},
			
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		this.requestLogout();
				    	}
				    }
				});
			},
			modifySex() {
				return;
				uni.navigateTo({
					url: "./sex"
				})
			},
			modifyBirthday() {
				uni.navigateTo({
					url: "../meBirthday/meBirthday"
				})
			},
			modifyNickname() {
				uni.navigateTo({
					url: "./meNickname"
				})
			},
			operator() {
				var me = this;
				
				uni.showActionSheet({
					
					itemList: ["查看我的头像", "从相册选择上传"],
					success(res) {
						var index = res.tapIndex;
						if (index == 0) {
							// 预览头像
							var faceArr = [];
							uni.previewImage({
								urls: faceArr,
								current: faceArr[0]
							})
						} else if (index == 1) {
							// 选择上传头像
							uni.chooseImage({
								count: 1,
								sizeType: ["compressed"],
								sourceType: ["album"],
								success(res) {
									// 获得临时路径
									var tempFilePath = res.tempFilePaths[0];
									// #ifdef H5
									uni.navigateTo({
										url: "./meFace?tempFilePath=" + tempFilePath
									})
									// #endif
									// #ifndef H5
									uni.navigateTo({
										url: "../../faceCrop/faceCrop?tempFilePath=" + tempFilePath
									})
									
									// #endif
								}
							})
							
						}
					}
				})
			},
			cleanStorage() {
				uni.clearStorageSync();
				uni.clearStorage();
				uni.removeStorageSync('token')
				uni.showToast({
					title: "清理缓存成功",
					mask: false,
					duration: 1500
				})
			},
			requestLogout() {
				var me = this;
				me.logout();
				uni.removeStorage({
					key:"token"
				})
				setTimeout(()=>{
					uni.navigateBack();
				}, 200)
			}
		}
	}
</script>

<style>
	/* 页面铺满屏幕 */
	.page-fill {
		width:100%;
		height: 100%;
		position: absolute;
	}
	
	.info-list {
		/* margin-top: 20upx; */
		padding: 0upx 30upx;
	}
	
	.info-words {
		color: #333333;
		font-size: 16px;
		width: 25%;
		line-height: 80upx;
		/* font-weight: bold; */
	}
	
	.face {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	
	.arrow-block {
		margin-left: 10upx;
		line-height: 86upx;
	}
	
	.arrow-ico {
		width: 30upx;
		height: 30upx;
	}
	
	.item-wapper {
		display: flex;
		/* margin-top: 20upx; */
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.face-line-upbottom {
		margin-top: 20upx;
		/* margin-bottom: 20upx; */
		padding-top: 20upx;
		padding-bottom: 20upx;
	}
	
	.line-top {
		/* margin-top: 20upx; */
	}
	
	.right-wapper {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	
	.gray-fields {
		font-size: 14px;
		color: darkgray;
		line-height: 80upx;
	}
	
	/* 底部操作 start */
	.footer-wapper {
		position: fixed;
		bottom: 30rpx;
		background-color:#12B3F9;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.footer-words {
		text-align: center;
		padding: 20upx;
		color: white;
		font-size: 16px;
	}
	/* 底部操作 end */
</style>
